<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 获取/修改样式属性 -->
    <!-- 
        1.直接修改内联样式
        需求：使用一个div，每次点击都会放大字体
    -->
    <div style="font-size: 20px;">点击这个div字体放大</div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function(){
            // 先获取到当前的字体大小
            let size = parseInt(div.style.fontSize);
            size += 10;
            console.log(size);
            div.style.fontSize = size + "px";
            console.log(div.style.fontSize);
        }
    </script>
    <hr>

    <!-- 
        2.修改元素应用的css类名 
        需求：切换日夜间模式
    -->
    <div id="one" class="light" style="font-size: 20px; height: 500px;">点击切换日夜间模式</div>
    <style>
        .light {
            /* 日间模式 */
            color: #000;
            background-color: #fff;
        }
        .dart {
            /* 夜间模式 */
            color: #fff;
            background-color: #000;
        }
    </style>
    <script>
        let div2 = document.querySelector("#one");
        div2.onclick = function(){
            // 注意：此处获取div的class的值不是使用div.class，而是使用div.className
            let now = div2.className;
            console.log(now);
            if(now == "light"){
                div2.className = "dart";
            }else{
                div2.className = "light";
            }
        }
    </script>
</body>
</html>